<template>
  <main class="main">
    <!-- 右边内容部分 -->
    <div class="main-content">
      <div class="main-left">
        <div class="left-content">
          <!-- 顶部工具类-推荐/关注 -->
          <div class="box">
            <!-- 设置黏性对齐 -->
            <div class="back_page">
              <div class="back_btn" :title="$t('index.back')">
                <div class="back_panel" @click="back">
                  <div class="icon">
                    <i class="el-icon-arrow-left"></i>
                  </div>
                  <div>
                    <div class="set_txt">{{ $t("setting.language") }}</div>
                    <div class="acc">@{{ CurrentUserInfo.account }}</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 设置列表 -->
            <div class="setting_list">
              <!-- 语言设置 -->
              <div class="language_panel">
                <el-select
                  class="language_select"
                  v-model="select_language_text"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in GlobalList"
                    :key="item.in_language"
                    :label="item.in_language_text"
                    :value="item.in_language_file"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="language_tip">
                {{ $t("setting.language_tip") }}
              </div>
              <div class="btn_panel">
                <button
                  class="el-button el-button--primary is-round"
                  @click="saveEdit"
                >
                  {{ $t("setting.save_language") }}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 主页右侧模板 -->
      <MainRight />
    </div>
  </main>
</template>
<script>
//MainRight
import MainRight from "@/components/MainRight.vue";

//获取统一请求接口
import { getGlobaLanguageList } from "@/api";

export default {
  name: "languagesComponents",
  components: {
    MainRight,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      is_choose: 1,
      CurrentUserInfo: {
        user_id: JSON.parse(localStorage.getItem("user")).user_id,
        account: JSON.parse(localStorage.getItem("user")).username
          ? JSON.parse(localStorage.getItem("user")).username
          : "账号",
        user_headimg: JSON.parse(localStorage.getItem("user")).user_headimg
          ? JSON.parse(localStorage.getItem("user")).user_headimg
          : require("@/assets/img/user.png"),
        user_nickname: JSON.parse(localStorage.getItem("user")).user_nickname,
        auth_id: this.is_choose ? this.is_choose : 0,
        auth_input_limit: 1000,
      },
      GlobalList: [
        {
          in_language_file: "zh",
          in_language_text: "简体中文",
        },
        {
          in_language_file: "en",
          in_language_text: "英文",
        },
      ],
      select_language_text: "zh",
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData(){
        this.getGlobalList();
        let language = localStorage.getItem("lang");
        this.select_language_text = language;        
    },
    back() {
      this.$router.go(-1);
    },
    //获取国际化列表
    async getGlobalList() {
      let res = await getGlobaLanguageList({});
      if (res.state == 200) {
        this.GlobalList = res.data;
      }
    },
    select_change() {
      this.select_language_value = "";
    },
    //保存
    async saveEdit() {
      //设置当前国际化
      localStorage.setItem("lang", this.select_language_text);
      //刷新
      window.location.reload();
      //   this.$message({
      //     message: "保存成功",
      //     type: "success",
      //   });
    },
  },
};
</script>
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
/* 右侧主内容 */
.main {
  width: 990px;
  min-height: 415px;
  padding: 0 10px;
}

.main-content {
  display: flex;
  justify-content: space-between;
}

/* 内容左侧样式 */
.main-left {
  max-width: 600px;
  background-color: #ffffff;
  border-radius: 5px;
  margin-right: 15px;
}

.left-content {
  display: flex;
  width: 600px;
  min-height: 100%;
}

.box {
  width: 100%;
  min-height: 900px;
}

/* 顶部用户背景及信息 */
.user_bg_panel {
  border-radius: 10px;
  display: flex;
  position: relative;
}

.back_page {
  display: flex;
  position: sticky;
  /* 不要忘了设置 top */
  top: 0;
  padding: 10px 10px;
  background-color: rgba(255, 255, 255, 0.75);
  color: #000;
  z-index: 299;
  margin-bottom: -38px;
  box-shadow: 0px 1px 3px #939393;
}

.back_btn {
  position: relative;
  cursor: pointer;
  display: flex;
  width: 100%;
}

.back_panel {
  display: flex;
  width: 100%;
}

.back_panel .icon {
  line-height: 39px;
  margin-right: 5px;
}

.back_panel .set_txt {
  font-weight: 700;
}

.nickname {
  font-weight: 700;
}

.acc {
  font-size: 13px;
  color: #939393;
  margin-top: 3px;
}

/* 设置列表 */
.setting_list {
  display: flex;
  flex-direction: column;
  margin-top: 38px;
  width: 100%;
}

.language_panel {
  display: flex;
  justify-content: space-between;
  margin: 16px 10px;
}

.language_tip {
  font-size: 13px;
  padding: 0 10px;
}

.btn_panel {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}

.language_select {
  display: flex;
  width: 100%;
}

.el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}

.el-button--primary {
  color: #fff;
  background-color: rgba(29, 155, 240, 1);
  border-color: rgba(29, 155, 240, 1);
}

.el-button--primary:hover {
  background-color: rgba(29, 155, 240, 0.7);
  border-color: rgba(29, 155, 240, 0.7);
}

.el-button.is-round {
  border-radius: 20px;
  padding: 12px 23px;
}

@media screen and (max-width: 720px) {
  .main {
    width: 100%;
    padding: 0;
    margin-bottom: 52px;
  }
  .main-left {
    width: 100%;
    margin-right: 0px;
    min-width: 390px;
  }

  .left-content {
    width: 100%;
  }

  .user_avatar {
    margin: -35px 20px 0 0;
    padding: 1px;
    width: 60px;
    height: 60px;
  }
  .auth_banner {
    justify-content: center;
    width: 100%;
  }

  .auth_personal,
  .auth_organizaion {
    max-width: 40%;
  }

  .auth_personal {
    margin-right: 20px;
  }
}

@media (max-width: 1050px) {
  .main {
    max-width: 600px;
  }
  .main-right {
    display: none;
    width: auto;
  }
}

@media (max-width: 1300px) {
}
</style>
    